<template>
  <div class="songlistdetail">
    <div class="songlists">
      <div
        class="back"
        :style="{ backgroundImage: 'url(' + songlists.coverImgUrl + ')' }"
      ></div>
      <div class="white"></div>
      <p class="name">{{ songlists.name }}</p>
      <p class="desc">{{ songlists.description }}</p>

      <img class="create" :src="creators.avatarUrl" alt="" />
      <span class="nickname">{{ creators.nickname }}</span>
      <div class="face">
        <img :src="songlists.coverImgUrl" alt="" />
        <span class="play"
          ><van-icon name="play" />{{ playcounts + "万" }}</span
        >
      </div>
      <ul class="songs">
        <li
          class="songss"
          v-for="(item, i) in musiclist"
          :key="item.id"
          @click="
            gosongDetail(item.id);
            change(i);
          "
        >
          <span class="num">{{ i + 1 }}</span>
          <span class="singname">{{ item.name }}</span>
          <div class="singers">
            <span class="quality">SQ</span>
            <span class="singername" v-for="v in item.ar" :key="v.id">
              - {{ v.name }}</span
            >
          </div>
          <van-icon
            name="play-circle-o"
            size="21"
            color="#B3B3B3"
            class="playbtn"
          />
          <van-icon name="weapp-nav" class="weapp" />
        </li>
      </ul>
      <div class="sanlian">
        <span
          ><van-icon name="add-o" size="25" class="insanlian" />
          {{ subscribedcounts }}</span
        >
        <span class="shu">|</span>
        <span
          ><van-icon name="chat-o" size="25" class="insanlian" />
          {{ commentcounts }}</span
        >
        <span class="shu">|</span>
        <span
          ><van-icon name="share-o" size="25" class="insanlian" />
          {{ sharecounts }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songlists: [],
      playcounts: [],
      subscribedcounts: [],
      commentcounts: [],
      sharecounts: [],
      creators: [],
      idlist: [],
      musiclist: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    change(i) {
      document.querySelectorAll(".songss")[i].style.background = "#e9e9e9";
    },
    //点击跳转歌曲详情
    gosongDetail(id) {
      this.$router.push(`/songdetail/${id}`);
    },
    //通过获取到的歌曲ID获取歌曲详情
    getmusicurl(id) {
      axios
        .get("http://localhost:3000/song/detail", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.songs[0];
            /* console.log(result); */
            this.musiclist.push(result);
          }
        });
    },
  },
  created() {
    const id = this.$route.params.id;
    console.log(id);
    //获取歌单详情
    axios.get(`http://localhost:3000/playlist/detail?id=${id}`).then((res) => {
      console.log("歌单详情", res);
      console.log(res.data.playlist);
      this.songlists = res.data.playlist;
      this.playcounts = this.songlists.playCount;
      this.creators = this.songlists.creator;
      this.subscribedcounts = this.songlists.subscribedCount;
      this.commentcounts = this.songlists.commentCount;
      this.sharecounts = this.songlists.shareCount;
      console.log(this.songlists);
      this.idlist = this.songlists.trackIds;
      console.log(this.idlist);
      this.idlist.forEach((v) => {
        this.getmusicurl(v.id);
      });
      if (this.playcounts > 10000) {
        this.playcounts = (this.playcounts / 10000).toFixed(1);
      }
      if (this.subscribedcounts > 10000) {
        this.subscribedcounts = (this.subscribedcounts / 10000).toFixed(0);
        this.subscribedcounts = this.subscribedcounts + "w+";
      }
      if (this.commentcounts > 10000) {
        this.commentcounts = (this.commentcounts / 10000).toFixed(0);
        this.commentcounts = this.commentcounts + "w+";
      }
      if (this.sharecounts > 10000) {
        this.sharecounts = (this.sharecounts / 10000).toFixed(0);
        return (this.sharecounts = this.sharecounts + "w+");
      }
    });
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.white {
  width: 100%;
  height: 30px;
  position: absolute;
  top: 220px;
  z-index: 999;
  background-color: #fff;
}
.face {
  width: 120px;
  height: 120px;
  position: relative;
  top: 50px;
  left: 20px;
}
.face img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.songlists {
  position: relative;
}
.back {
  width: 100%;
  height: 220px;
  box-sizing: border-box;
  position: absolute;
  top: 3px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  overflow: hidden;
  z-index: -1;
  opacity: 0.7;
}
.name {
  position: absolute;
  color: #fff;
  top: 50px;
  left: 150px;
}
.desc {
  position: absolute;
  color: #000;
  top: 153px;
  left: 150px;
  font-size: 14px;
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.play {
  box-sizing: border-box;
  padding: 2px 8px 2px 5px;
  height: 25px;
  color: #fff;
  display: inline-block;
  position: absolute;
  border-radius: 20px;
  text-align: center;
  top: 5px;
  right: 5px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.24);
  font-size: 14px;
}
.create {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  position: absolute;
  top: 95px;
  left: 150px;
}
.nickname {
  font-size: 12px;
  position: absolute;
  top: 107px;
  left: 196px;
}
.songs {
  position: absolute;
  top: 250px;
  width: 100%;
}
.songs li {
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  height: 60px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.num {
  position: absolute;
  left: 22px;
  top: 17px;
  color: #a7a7a7;
}
.sanlian {
  display: flex;
  justify-content: space-evenly;
  width: 280px;
  height: 40px;
  border-radius: 30px;
  background-color: #fff;
  color: #000;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -140px;
  align-items: center;
  box-shadow: 1px 2px 3px #ccc, -1px 2px 3px #ccc;
  z-index: 9999;
}
.sanlian span {
  display: flex;
  align-items: center;
}
.shu {
  color: #e9e9e9;
  display: inline-block;
  font-size: 19px;
}
.insanlian {
  margin-right: 5px;
}
.singname {
  width: 230px;
  margin-left: 50px;
  margin-bottom: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.singers {
  width: 230px;
  display: flex;
  font-size: 12px;
  color: #9e9e9e;
  text-indent: 0.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.weapp {
  position: absolute;
  right: 20px;
  top: 20px;
}
.playbtn {
  position: absolute;
  right: 60px;
  top: 16px;
}
.quality {
  margin-left: 50px;
  color: #ff6b6b;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #ffdddd;
  border-radius: 3px;
  padding: 2px 3px;
  text-align: center;
  text-indent: 0em;
}
.singername {
  line-height: 19px;
}
</style>
